import React from "react";
import ReactDom from "react-dom";

export default class Part extends React.Component{
  constructor(props){
    super(props);
    //props=[{id,name,selected}]
    // this.state={};
    // this.state.list=this.props.list;
  }
//点击了a标签以后出触发该方法，该方法通过id找出对应的this.state.list[i]，之后修改他的select 取反值 （第一次是false，第二次位true）

  // change(id){
  //   let list=this.state.list;
  //   for(let i=0;i<this.state.list.length;i++){
  //     if(this.state.list[i].id === id){
  //       list[i].selected=!(list[i].selected);
  //     }
  //   }
  //   this.setState({list});
  // }
  //
  // add(item){
  //   const list=this.state.list;
  //   list.push(item);
  //   this.setState({list});
  // }
  //
  // del(id){
  //   let delIndex=null;
  //   for(let i=0;i<this.state.list.length;i++){
  //     if(this.state.list[i].id === id){
  //       delIndex=i;
  //       break;
  //     }
  //   }
  //   if(delIndex!==null){
  //     this.state.list.splice(delIndex,1);
  //     this.setState({list:this.state.list});
  //   }
  // }

//渲染的时候不需要加 selected 属性，因为默认都是 "" 会转换成false

  render(){
    var alist=[];
    this.props.list.forEach(
      item=>alist.push(<a key={item.id} className={item.selected?"selected":""} onClick={()=>this.props.onSelect(item.id)}>{item.title}</a>))
    return <ul>
    <li>{alist}</li>
    </ul>
  }
}
//
// var list=[{
//   id:"12345",
//   selected:false,
//   title:"happy"
// },{
//   id:"78910",
//   selected:false,
//   title:"maosen"
// }];
//
// ReactDom.render(<Part list={list}></Part>,document.body);
